{% extends 'blog/base.html' %}

{% block content %}
    <div class="navbar bg-base-100 shadow-sm">
        <div class="flex-1">
            <a class="btn btn-ghost text-xl">daisyUI</a>
        </div>
        <div class="flex-none">
            <button class="btn btn-square btn-ghost">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                     class="inline-block h-5 w-5 stroke-current">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
                </svg>
            </button>
        </div>
    </div>
    <details class="dropdown">
        <summary class="btn m-1">open or close</summary>
        <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
            <li><a>Item 1</a></li>
            <li><a>Item 2</a></li>
        </ul>
    </details>
    <button hx-get="/blog/list/" hx-target="#result">点击测试</button>
    <div id="result"></div>

    <div class="overflow-x-auto">
        <table class="table table-zebra">
            <!-- head -->
            <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Job</th>
                <th>Favorite Color</th>
            </tr>
            </thead>
            <tbody>
            <!-- row 1 -->
            <tr>
                <th>1</th>
                <td>Cy Ganderton</td>
                <td>Quality Control Specialist</td>
                <td>Blue</td>
            </tr>
            <!-- row 2 -->
            <tr>
                <th>2</th>
                <td>Hart Hagerty</td>
                <td>Desktop Support Technician</td>
                <td>Purple</td>
            </tr>
            <!-- row 3 -->
            <tr>
                <th>3</th>
                <td>Brice Swyre</td>
                <td>Tax Accountant</td>
                <td>Red</td>
            </tr>
            <!-- row 4 -->
            <tr>
                <th>4</th>
                <td>Brice Swyre</td>
                <td>Tax Accountant</td>
                <td>Red</td>
            </tr>
            </tbody>
        </table>
        <div>
            <!-- name of each tab group should be unique -->
            <div class="tabs tabs-border">
                <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 1"/>
                <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 1</div>

                <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 2" checked="checked"/>
                <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 2</div>

                <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 3"/>
                <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 3</div>
            </div>
        </div>
        <div>
            <!-- name of each tab group should be unique -->
            <div class="tabs tabs-box">
                <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 1"/>
                <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 2" checked="checked"/>
                <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 3"/>
            </div>
        </div>
    </div>
{% endblock %}